/**
* 项目一户式预览页面
*/
<template>
  <div class="project-preview-yhs-wrapper" v-show="!loading">
    <div class="project-preview-yhs-header">
      <div class="header-item">
        <span>项目名称：{{ echoFormData.PRO_NAME }}</span>
      </div>
      <div class="header-item">
        <span>单位名称：{{ echoFormData.AGENCY_NAME }}</span>
      </div>
      <div class="header-item">
        <span>单位：万元</span>
      </div>
    </div>
    <div class="project-preview-yhs-body">
      <div class="yhs-body-center">
        <RkFormRenderBusi ref="rkFormRenderRef"
          busiType="ET001"
          formType="yhs"
          :formId="echoFormData.formId"
          :formData="echoFormData"
          @loaded="renderBusiFormLoaded"
        />
      </div>
    </div>
  </div>
</template>

<script setup name="ProjectYhsPreviewView">
import RkFormRenderBusi from '@/components/form/RkFormRenderBusi.vue'
import { ElLoading } from "element-plus"
import { getReserveProjectInfo } from '@/api/api-project.js'

const props = defineProps({
  proId: { type: String, required: true },
  formId: { type: String, required: true }
})

// ----- 加载表单数据信息
// 加载中
const loading = ref(false)
// 加载中遮罩
const openLoading = ref(false)
// 回显数据
const echoFormData = ref({})
/**
 * 加载表单信息
 * @param {Object} config 参数配置
 */
const loadData = async (config) => {
  if (!validateConfig(config)) return
  echoFormData.value = config
  loading.value = true
  openLoading.value = ElLoading.service({ fullscreen: true, text: '加载中......' })
  const projectInfo = await getProjectInfo(config)
  echoFormData.value = { ...echoFormData.value, ...projectInfo }
  echoFormData.value['agName'] = projectInfo['AGENCY_NAME']
}
/**
 * 校验参数配置
 * @param {Object} config 参数配置
 */
const validateConfig = (config) => {
  if (typeof config === 'object' || config instanceof Object) {
    if ((config.hasOwnProperty('proId') && config.hasOwnProperty('formId')) && (config.proId && config.formId)) {
      return true
    } else {
      return false
    }
  } else {
    return false
  }
}
/**
 * 获取表单回显信息
 * @param {String} objectId 回显数据
 */
const getProjectInfo = ({proId, formId}) => {
  return new Promise(resolve => {
    getReserveProjectInfo({ proId, formId }).then((res) => {
      const { code, data, msg } = res
      if (code === 200) {
        resolve(data)
      } else {
        console.error(msg)
        resolve({})
      }
    }).catch(err => {
      console.error(err)
      openLoading.value.close()
      loading.value = false
      resolve({})
    })
  })
}
/**
 * 表单渲染结束
 */
const renderBusiFormLoaded = () => {
  openLoading.value.close()
  loading.value = false
}

// 执行加载数据方法
loadData(props)

</script>

<style lang="scss" scoped>
.project-preview-yhs-wrapper {
  height: 100vh;
  width: 100%;
}
.project-preview-yhs-header {
  display: flex;
  height: 35px;
  .header-item {
    display: flex;
    flex: 1;
    height: 100%;
    text-align: center;
    justify-content: center;
    align-items: center;
    font-size: 16px;
  }
}
.project-preview-yhs-body {
  height: calc(100% - 35px);
  flex: 1;
  display: flex;
  flex-direction: column;
  .yhs-body-center {
    height: 100%;
  }
}
</style>